<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-05-18 14:44:23
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-08-06 20:58:47
 * @Description: 
-->
<template>
    <div class="display-container" :style="`height:${view.height}px`">
        <div class="display-inner">
            <el-menu :collapse="procesStore.menu.isCollapse" :default-active="state.activeIndex" class="el-menu-vertical-demo"
                @select="handleChange" @close="handleClose" :collapse-transition="false" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b" style="border: 0!important;">
            </el-menu>
            <div class="dispaly-main">
                <el-row>
                    <el-col :span="24" class="bread-container">
                        <el-breadcrumb :separator-icon="ArrowRight">
                            <el-breadcrumb-item v-for="item in route.matched">{{ item.meta.title }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="main-body" :style="`height:${view.height - 60}px`">
                        <router-view></router-view>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch } from 'vue'
import HttpService from "@/api/api.js";
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting, ArrowRight
} from '@element-plus/icons-vue'
import * as _ from "lodash";
import { useProcesStore } from '@/store/process'
import router from '@/router';
import { useRoute } from 'vue-router';
const procesStore = useProcesStore()
const route = useRoute()
var view = reactive({ 
    height: window.innerHeight - 61
})
const state: any = reactive({
    breadArray: [],
    activeIndex: 'task',
})

const handleChange = function (menu: string) {
    switch (menu) {
        case 'model':
            router.push('/index/process/model')
            break;
        case 'task':
            router.push('/index/process/task')
            break;
        default:
            break;
    }
}
const handleClose = function () {

}

router.push('/index/process/task')


window.onresize = _.debounce(() => {
    view.height = window.innerHeight - 61
}, 100)
watch(
    () => route.path,
    (val) => {
        if (val.indexOf('/index/process/model') > -1) {
            state.activeIndex = 'model'
        } else if (val.indexOf('/index/process/task') > -1) {
            state.activeIndex = 'task'
        }
    })
</script>

<style lang="scss" scoped>
.display-inner {
    display: flex;


    .dispaly-main {
        padding: 15px;
        width: 100%;

        .bread-container {
            height: 30px;
        }

        .main-body {
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
            border-radius: 10px;
        }
    }

}
</style>
<style lang="scss"></style>